{include file="common/header" /}
<div class="x-body">
    <div method="post" class="layui-form from1">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>登录名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label for="real_name" class="layui-form-label">
                <span class="x-red">*</span>真实姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="real_name" name="real_name" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="height: 40px">
            <label class="layui-form-label"><span class="x-red">*</span>角色</label>
            {if($role)}
            {foreach($role as $k =>$v)}
            <input type="checkbox" name="groupid[]" value="{$v.id}" lay-skin="primary" title="{$v.title}">
            {/foreach}
            {/if}

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="禁止"><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>男</div></div>
                <input type="radio" name="status" value="1" title="冻结" checked=""><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>头像</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 50px;height: 50px;border-radius: 25px">
                    <p id="demoText"></p>
                    <input type="hidden" name="portrait">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_pass" name="password" required="" lay-verify="pass"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                6到16个字符
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn add" lay-filter="add" lay-submit="">
                增加
            </button>
        </div>
    </div>
</div>
<script>

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/admin/upload/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code !=200){
                    return layer.msg('上传失败');
                }else {
                    $('input[name="portrait"]').val(res.data);
                    layer.msg('上传成功');
                }

                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


    });



    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;

        //自定义验证规则
        form.verify({
            // nikename: function(value){
            //     if(value.length < 5){
            //         return '昵称至少得5个字符啊';
            //     }
            // }
            // ,
            pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
        });

        // //监听提交return false;
        form.on('submit(add)', function(data){
            var from_data = data.field;
            $.ajax({
                url:"/admin/admin/add",
                type:'post',
                data:from_data,
                success:function (data) {
                    if(data.code == 200){
                        layer.alert("增加成功", {icon: 6},function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }else {
                        layer.alert(data.msg, {icon: 5});
                    }
                    console.log(data);

                    // return false;
                },
                error:function (res) {
                    layer.msg('网络错误',{icon:5});
                    // return false;
                }
            });
            //发异步，把数据提交给php
            // layer.alert("增加成功", {icon: 6},function () {
            //     // 获得frame索引
            //     var index = parent.layer.getFrameIndex(window.name);
            //     //关闭当前frame
            //     parent.layer.close(index);
            // });
            // alert(11);
            // return true;
        });
        // $('.add').click(function () {
        //     var obj = $(":input");
        //     obj.each(function () {
        //         console.log(this);
        //     })
        //     console.log(obj);
        //
        //
        //     // $.ajax({
        //     //     url:"/admin/admin/add",
        //     //     type:'post',
        //     //     data:form,
        //     //     success:function (data) {
        //     //         console.log(data);
        //     //     },
        //     //     error:function (res) {
        //     //         layer.msg('网络错误',{icon:5});
        //     //     }
        //     // });
        // });

    });
</script>
{include file="common/footer" /}